<template>
  <div style="height: 100%">
    <div style="display: none" class="div-parant" @click="divClick">
      <div class="flex-div" style="flex: 0.4">
        <span class="fz15 ml5" style="font-size: 13px;font-weight: bold">
          {{
            props.patientInfo?.name
          }}</span>
          {{dictStore.getMateDictInfo(
            dictDataMap['sys_user_sex'],
            props.patientInfo?.sex
          ).dictValue === '1'
            ? '男'
            : '女'}}
        <span class="fz13 ml10">{{ props.patientInfo?.ageAll }}</span>
      </div>
      <!--            <div class="flex-div" style="flex: 0.4">-->
      <!--                <span class="fz13">{{ props.patientInfo?.ageAll }}</span>-->
      <!--            </div>-->
      <div class="flex-div" style="flex: 0.5">
        <span class="fz13">门诊号：{{ props.patientInfo?.clinicNo }}</span>
      </div>
      <div class="flex-div" style="flex: 0.5">
        <span class="fz13">联系电话：{{ props.patientInfo?.phone }}</span>
      </div>
      <div class="flex-div" style="flex: 0.6">
        <span class="fz13">{{ props.patientInfo?.idNo }}</span>
      </div>
      <div class="flex-div" style="flex: 1">
                <span class="fz13">门诊诊断：<span
                  style="color: #d86f6f">{{ props.patientInfo?.diagnosisStr }}</span></span>
      </div>
      <i-ep-arrowDown v-if="!showType" style="margin-top: 6px; margin-right: 6px"/>
      <i-ep-arrowUp v-else style="margin-top: 6px; margin-right: 6px"/>
    </div>
    <!-- <div  v-if="showType" class="div-parant" style="border-top: 1px dashed #000000; margin-bottom: 5px;"> -->
    <div  v-if="false" class="div-parant" style="display: none;border-top: 1px dashed #000000; margin-bottom: 5px;">
      <div class="flex-div ml5" style="flex: 0.5">
        <span class="fz13">接诊科室： {{ props.patientInfo?.deptName }}</span>
      </div>
      <div class="flex-div" style="flex: 0.7">
        <span class="fz13">接诊医生：{{ props.patientInfo?.doctorName }}</span>
      </div>
      <div class="flex-div" style="flex: 0.7">
        <span class="fz13">就诊日期：{{ props.patientInfo?.visitDate }}</span>
      </div>
      <div class="flex-div" style="flex: 0.5">
        <span class="fz13">婚姻：
          {{
            dictStore.getMateDictInfo(
              dictDataMap["marriage_dict"],
              props.patientInfo?.marriage
            )
              ? dictStore.getMateDictInfo(
                dictDataMap["marriage_dict"],
                props.patientInfo?.marriage
              ).dictLabel
              : ""
          }}</span>
      </div>

      <div class="flex-div" style="flex: 1">
        <span class="fz13">费别：
          {{
            dictStore.getMateDictInfo(
              dictDataMap["medical_insurance_type"],
              props.patientInfo?.chargeType
            )
              ? dictStore.getMateDictInfo(
                dictDataMap["medical_insurance_type"],
                props.patientInfo?.chargeType
              ).dictLabel
              : ""
          }}</span>
      </div>
      <div class="flex-div" style="flex: 0.5">
        <span class="fz13">医保来源：
          {{
            dictStore.getMateDictInfo(
              dictDataMap["patient_medical_source"],
              props.patientInfo?.source
            )
              ? dictStore.getMateDictInfo(
                dictDataMap["patient_medical_source"],
                props.patientInfo?.source
              ).dictLabel
              : ""
          }}</span>
      </div>
    </div>
    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
      <el-tab-pane label="基本信息" name="1"></el-tab-pane>
      <el-tab-pane v-if="!isOtcOutpatient" label="门诊病历" name="2"></el-tab-pane>
      <el-tab-pane v-if="permissions.includes('business:clinic:examApply') && !isOtcOutpatient" label="检查"
                   name="3"></el-tab-pane>
      <el-tab-pane v-if="permissions.includes('business:clinic:labApply') && !isOtcOutpatient" label="检验"
                   name="4"></el-tab-pane>
      <el-tab-pane label="处方" name="5"></el-tab-pane>
      <el-tab-pane label="处置治疗" name="6"></el-tab-pane> 
      <el-tab-pane v-if="permissions.includes('business:clinic:material') && !isOtcOutpatient" label="耗材开单" 
                    name="9"></el-tab-pane>
      <el-tab-pane name="7">
        <template #label><span style="color: #ff0000">退费申请</span></template>
      </el-tab-pane>
      <el-tab-pane v-if="permissions.includes('business:clinic:hospitalizationNotice') && !isOtcOutpatient"
                   label="住院通知" name="8">
        <template #label><span style="color: #b06e00">住院通知</span></template>
      </el-tab-pane>
    </el-tabs>
    <div id="center-div" class="center-div">
      <template v-if="activeName === '1'">
        <patient-info ref="patientInfoRef" :is-otc-outpatient="isOtcOutpatient" @closeLoading="closeLoading"/>
      </template>
      <template v-else-if="activeName === '2'">
        <medical-record/>
      </template>
      <template v-else-if="activeName === '3'">
        <exam-apply ref="examApplyRef" :inorout-flag="'4'"/>
      </template>
      <template v-else-if="activeName === '4'">
        <lab-apply ref="labApplyRef" :inorout-flag="'4'"/>
      </template>
      <template v-else-if="activeName === '5'">
        <prescription ref="prescriptionRef" :inorout-flag="'4'" :is-otc-outpatient="isOtcOutpatient"
                      :is-to-convenient-outpatient="isToConvenientOutpatient"/>
      </template>
      <template v-else-if="activeName === '6'">
        <outp-treat-rec ref="outpTreatRecRef" :inorout-flag="'4'" :is-otc-outpatient="isOtcOutpatient"/>
      </template>
      <template v-else-if="activeName === '9'">
        <material-orders ref="materialOrdersRef" :inorout-flag="'4'" :is-otc-outpatient="isOtcOutpatient"/>
      </template>
      <template v-else-if="activeName === '7'">
        <clinic-refunds ref="clinicRefundsRef"/>
      </template>
      <template v-else-if="activeName === '8'">
        <hospitalization-notice :inorout-flag="'4'"/>
      </template>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {useDictStoreHook} from "@/store/modules/dict";
import patientInfo from "./patientInfo.vue";
import medicalRecord from "../diagnosis/medicalRecord.vue";
import examApply from "../exam/index.vue";
import labApply from "../lab/index.vue";
import outpTreatRec from "@/views/doctor/outpTreatRec/index.vue";
import prescription from "../prescription/index.vue";
import materialOrders from "../material/index.vue"; // 添加耗材开单组件
import clinicRefunds from "../refundsApplication/clinicRefunds.vue";
import hospitalizationNotice from '@/views/hospitalization/hospitalizationNotice/index.vue';
import {useUserStoreHook} from "@/store/modules/user";

const dictStore = useDictStoreHook();
const dictDataMap = ref(
  dictStore.isTypeGetData(
    "patient_medical_source",
    "medical_insurance_type",
    "sys_user_sex",
    "clinic_type",
    "marriage_dict"
  )
);
const useUserStore = useUserStoreHook();
const activeName = ref("1");
const patientInfoRef = ref();
const examApplyRef = ref();
const labApplyRef = ref();
const prescriptionRef = ref();
const materialOrdersRef = ref(); // 耗材开单组件引用
const outpTreatRecRef = ref();
const clinicRefundsRef = ref();
const emits = defineEmits(["closeLoading"]);
const showType = ref(false);
const props = defineProps({
  patientInfo: <any>{},
  // 是否来自便捷门诊
  isToConvenientOutpatient: {
    type: Boolean,
    default: false
  },
  // 是否来在OTC门诊  默认不是来自otc门诊
  isOtcOutpatient: {
    type: Boolean,
    default: false
  }
});
const permissions = (useUserStore && useUserStore.user.permissions) as string[] || [];

// 左侧列表点击后默认加载第一个tab页
function handleClick(pane, _Event) {
  if (typeof pane === "undefined" || pane.props.name === "1") {
    activeName.value = "1";
    nextTick(() => {
      patientInfoRef.value.getClinicMasterFun();
    });
  }
  // nextTick(() => {
  //     patientInfoRef.value.getClinicMasterFun()
  // })
}
// function patientClickCssChange(index: number, patientList: any) {
//   const cardRef = "patientCard-" + index;
//   for (let i = 0; i < patientList.length; i++) {
//     if (index === i) {
//       const myDivParent = document.getElementById(cardRef) as HTMLElement;
//       myDivParent.className = "box-card left-small-card patient-click-div";
//       myDivParent.style.borderRadius = "5px";
//     } else {
//       const cardRef = "patientCard-" + i;
//       const myDivParent = document.getElementById(cardRef) as HTMLElement;
//       myDivParent.classList.remove("patient-click-div");
//       myDivParent.style.borderRadius = "5px";
//     }
//   }
// }
// 顶部患者信息展开事件
function divClick() {
  const myDivParent = document.getElementById("center-div") as HTMLElement;
  if (showType.value) {
    showType.value = !showType.value;
    myDivParent.className = "center-div";
  } else {
    showType.value = !showType.value;
    // 展开
    myDivParent.className = "center-div-expand";
  }
}

function closeLoading() {
  emits("closeLoading");
}

/**
 * 便捷门诊收费后刷新中间区域事件
 */
function convenientRefresh() {
  if (activeName.value === "3") {
    nextTick(() => {
      examApplyRef.value.examItemRefresh()
    })
  } else if (activeName.value === "4") {
    nextTick(() => {
      labApplyRef.value.labItemRefresh()
    })
  } else if (activeName.value === "5") {
    nextTick(() => {
      prescriptionRef.value.getList()
    })
  } else if (activeName.value === "6") {
    nextTick(() => {
      outpTreatRecRef.value.getList()
    })
  } else if (activeName.value === "7") {
    nextTick(() => {
      clinicRefundsRef.value.shuxin()
    })
  }
}

defineExpose({
  handleClick,
  convenientRefresh
});
</script>

<script lang="ts">
export default {
  name: "RightPatient",
};
</script>
<style scoped>
.center-div-expand {
  height: calc(100% - 90px);
  overflow-y: auto;
  border: 1px solid #027687;
  border-left: none;
  border-radius: 0 5px 5px 0;
  padding: 10px;
}

.center-div {
  height: calc(100% - 20px);
  overflow-y: auto;
  /* border-left: 1px solid #027687;
  border-bottom: 1px solid #027687;
  border-right: 1px solid #027687; */
  border-radius: 5px;
  padding: 10px;
}

:deep(.el-tabs--border-card > .el-tabs__content) {
  padding: 0;
}

:deep(.el-collapse-item__header) {
  height: 35px;
  margin-top: -10px;
  background-color: #b9d2d3;
  border-bottom: 1px dashed #000000;
  /* display: flow; */
}

:deep(.el-tabs--border-card > .el-tabs__header .el-tabs__item) {
  height: 30px;
}

.div-parant {
  display: flex;
  height: 30px;
  background-color: #4E64F6;
  color: #fff;
  opacity: 0.8;
}

:deep(.el-tabs__item) {
  padding: 0px 8px !important;
  font-weight: bold !important;
  color: #070707 !important;
}

:deep(.el-tabs__nav-scroll) {
  background-color: rgb(198 204 246);
  height: 31px;
  border-radius: 7px;
}
:deep(.el-tabs__nav .is-top) {
  margin-top: 3px;
}
:deep(.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active) {
  border-radius: 7px 7px 0 0;
}

#tab-1 {
  margin-left: -1px;
}
</style>
